<template>
  <div>

    <div style="width: 1500px;margin: auto">
      <div style="margin-left: 55px">
        共找到相关结果<font color="red">{{ total }}</font>个<br>
        <font size="5">相关直播</font>
      </div>
      <el-row>
        <el-col :span="10" v-for="(o, index) in listlive " :key="index" :offset="index > 0 ? 1 : 1" style="width: 300px;height: 250px;margin-top: 20px">
          <el-card :body-style="{ padding: '0px' }" style="border-radius: 20px" >
            <div style="cursor: pointer" @click="live(o.aId)">
              <img :src="o.fengmian" class="image1">
            <div style="padding: 0px;">
              <span style="font-size: 20px" v-html="o.aTitle"> </span> <span v-html="o.atName" style="float: right;font-weight:bold;color:gray;margin-right: 20px"></span><br>
              <i class="el-icon-user-solid" ></i> &nbsp;&nbsp;<span v-html="o.aName"></span>
              <span style="float: right;margin-right: 20px"><i class="el-icon-star-off"style="color: orange" ></i>{{o.aRedu}}</span><br>
              &nbsp;&nbsp;&nbsp;<span style="color: orange">{{o.chenghao}}</span>
            </div>
          </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "showlive",
  data(){
    return{
      listlive:[],
      word:'',
      total:'',
    }
  },
  methods: {
    likelive(){
      axios.post("http://localhost:7000/live-search/search/likeAnchor",{
        word:this.word,
        num:1
      }).then(res=>{
        if(res.data.code==200){
          this.listlive=res.data.data;
          this.total=res.data.total;
        }
      })
    },
    live(id){
      this.$router.push({name:'zhibo',query:{aId:id}})
    }
  },
  mounted() {
    this.word=this.$route.params.word;
    this.likelive();
  }
}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 50px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image1 {
  width: 320px;
  height: 150px;
  margin: auto;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

<style scoped>

</style>
